import React, { useEffect, useState } from "react";
import Headers from '../../compoents/Header'
import {  Button, Space, Table ,Upload } from 'antd';
import './index.scss';
import axios from "axios";
import * as XLSX from 'xlsx'
import JsExportExcel from "js-export-excel"
import instance from '../../utlis/index'
const columns= [
  {
    title: 'Name',
    width: 50,
    dataIndex: 'name',
    fixed: 'left',
  },
  {
    title: 'Age',
    width: 50,
    dataIndex: 'age',
    fixed: 'left',
    sorter: true,
  },
  { title: 'address',
   width: 50,
   dataIndex: 'address',
    fixed: 'left',
    sorter: true,
  },
  {
    title: '操作',
    fixed: 'right',
    width: 50,
    render: () => (
      <Space>
        <Button>编辑</Button>
        <Button>删除</Button>
      </Space>
    ),
  },
]
const Index=()=>{
  const text = '统计管理管理'
    const [list,setList] = useState([]) //ok
    const [dataList,setDataList] = useState([]) //ok
    const [tableList,setTableList] = useState([])
    // 获取原数据
    const getList = async()=>{
      try {
        const config ={
        url:'http://localhost:8000/userList',
        method:'get'
      }
      const res = await axios(config)
      const {data} = res
      setList(data)
      } catch (error) {
         console.log(error)
      }
    }
    // 导入和数据拼接到原数组中
     useEffect(()=>{
       const increment=()=>{
       const mergedList = list.concat(dataList)
       console.log(mergedList)
       setList(mergedList)
    }
    increment()
     },[dataList])
    const getallArticles=async()=>{
       try {
        const config = {
        url:'/api/get_allArticles',
        method:'get',
      }
       const res = await instance(config)
       const {data} = res
       setTableList(data.data)
       } catch (error) {
           console.log(error)
       }
      
    }


    useEffect(()=>{
      getList()
      getallArticles()
    },[])
  // 导入数据函数
  const handerbeforeUpload=(file)=>{
    return new Promise((resolve,reject)=>{
        analysis(file).then(resolve).catch(reject)
       
    })
  }
  const analysis=(file)=>{
     return new Promise((resolve,reject)=>{
      let filedRead = new FileReader()
         try {
          filedRead.onload=(excel)=>{
          let data = excel.target.result
          let exceltoObj=XLSX.read(data,{type:'binary'})
          let excelNme = exceltoObj.SheetNames[0]
          let exceltoarr = exceltoObj.Sheets[excelNme]
          let newarr = XLSX.utils.sheet_to_json(exceltoarr)
          setDataList(newarr)
      }
         } catch (error) {
          console.log(error)
         }
       filedRead.readAsBinaryString(file)
     })  
  }
  const exportandle=()=>{
    let exporttoexcel = new JsExportExcel({
      fileName:'简单的表格',
      datas:[
        {
          SheetName:'shuai',
          SheetData:list,
          SheetFilter:['key','name','age','address'],
          SheetHeader:['顺序','名字','年龄','地址']
        }
      ]
    })
    exporttoexcel.saveExcel()
  }
    return(
        <div className="container">
            <Headers text={text}></Headers>
            <div className="content">
                <div className="content-top" >
                          <div style={{display:'flex'}}>
                            <p>标题</p>
                            <input type="text" placeholder="请输入文章标题" />
                          </div>

                           <div>
                            <p>分类</p>
                             <select name="" id="">
                                <option value="">请选择</option>
                                <option value="">草稿</option>
                                <option value="">发布</option>
                            </select>
                           </div>
                        
                            <div>
                                <p>分类</p>
                              <select name="" id="">
                                 <option value="">请选择</option>
                                <option value=""></option>
                            </select>     
                           </div>     
                           <div>
                             <button className="search">搜索</button> 
                             <button className="reset">重置</button>
                            </div>     
                </div>
                 <div className="allArtcles">
                    
                 </div>
                <div className="tabsbox">
                  <div>
                    <Upload beforeUpload={(file)=>handerbeforeUpload(file)}>
                      <Button>导入</Button>
                    </Upload>
                    <Button onClick={()=>exportandle()}>导出</Button>
                  </div>
                    {/* <Table columns={columns} dataSource={list} scroll={{ x: 1300 }} /> */}
                    <Table columns={columns} dataSource={tableList} scroll={{ x: 1300 }} />
                </div>
            </div>
        </div>
       
    )
}
export default Index